<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="state">
        <img src="/@/assets/images/count.png" alt="" />
        租金计算器
      </div>
      <div class="content" style="width: 95%; margin: auto">
        <div class="plan-desc">
          <div class="plan-name">【凯斯纽荷兰贴息】一倒算厂商贴息</div>
          <div class="plan-info" style="text-align: right">
            <span>租赁期限：<em>36个月</em></span>
            <span>还款间隔：<em>月</em></span>
            <span>计算方式：<em>利息递减</em></span>
            <span>报价利率：<em>3.99%</em></span>
          </div>
        </div>
        <a-form>
          <a-row type="flex">
            <a-col :span="6">
              <a-form-item label="销售总额:">
                <a-input></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="销售总额:">
                <a-select>
                  <a-option label="Zone one" value="shanghai" />
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <a-form-item label="首付款:">
                <a-input></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="起租日:">
                <a-select>
                  <a-option label="Zone one" value="shanghai" />
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="每月还款日:">
                <a-select>
                  <a-option label="Zone one" value="shanghai" />
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="大额还款月:">
                <a-select>
                  <a-option label="Zone one" value="shanghai" />
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <a-form-item label="收取保证金:">
                <a-select style="width: 120rem">
                  <a-option label="Zone one" value="shanghai" />
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="">
                <div><a-input style="width: 270rem"></a-input>%(期初收取)</div>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="next">
        <a-button class="submit" @click="onNextStep">下一步</a-button>
      </div>
    </div>
  </div>
</template>

<script setup>
    import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue';
  import Back from '/@/components/go-back/index.vue';
  import { useRoute, useRouter } from 'vue-router';
  import { rzApplyApi } from '/@/api/system/rzApply';
  import { useRzApplyStore } from '/@/store/modules/system/rzApply';
  const router = useRouter();
  const onNextStep = () => {
    router.push({path:'/rzApply/planDetail'})
  };
  function getPriceSchemeData() {
      this.$post('/priceSchemeTemplate/configList', {}).then(res => {
        if (res.data && res.data.code == '2000000') {
          const list = [{id: '0', templateName: '常规报价'}];
          res.data.data.forEach(item => list.push(item));
          this.priceSchemeList = list;
        }
      });
    }
   function getBrandListData() {
      this.$post('/priceSchemeTemplate/brandList', {}).then(res => {
        if (res.data && res.data.code == '2000000') {
          this.brandTypeMap = res.data.data;
          const options = [];
          this.$xeUtils.objectEach(res.data.data, (item, key) => {
            const children = [];
            this.$xeUtils.objectEach(item, (discount, type) => {
              children.push({label: type, value: type});
            });
            options.push({label: key, value: key, children});
          });
          this.deviceOptions = options;
        }
      });
    }
</script>
<style scoped lang="less">
  @import url(../rzApply/index.less);
  .state {
    font-family: Microsoft YaHei;
    font-size: 22px;
    color: #1169e5;
    display: flex;
    align-items: center;
    margin-bottom: 32rem;
    img {
      width: 19px;
      height: 23px;
      margin-right: 12px;
    }
  }
</style>
